#messaging-content{
    
    position: relative;
    
    #additional-notification-container{
        
        overflow: hidden;
        position: absolute;
        width: 100%;
        background-color: rgba( $gray-lighter, .7 );
        color: $gray-light;
        font-size: 12px;
        padding: 5px;
        height: 0px;
        display: none;
    }
    
    #text-message-box-container{
    
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 40px;
        border-top: 1px solid $gray-lighter;
        z-index: 100;
        
        textarea{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 40px;
            border: none;
            padding: 10px;
        }
        
        #btn-fileupload{
            position: absolute;
            right: 10px;
            top: 0px;
            z-index: 110;
            font-size: 20pt;
            cursor: pointer;
            
            img{
                width: 30px;
            }
        }
        
        #btn-emoticons{
            position: absolute;
            right: 50px;
            top: 0px;
            z-index: 110;
            font-size: 20pt;
            cursor: pointer;

            img{
                width: 30px;
            }
            
        }
    }
    
    #messages{
    
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

            
        .sticker{
            img{
                max-width: 256px;
            }    
        }
            
        .message-cell{
            
            margin-top: 20px;
            width: 100%;
            
            .avatar{
                
                width: 45px;
                padding: 0px 10px 10px 10px;
                text-align: center;

                img{
                    width: 25px;
                    vertical-align: bottom;
                }
                              
            }

            .infoicon{
                font-size: 20px;
                margin-bottom: -5px;
            }
            
            .info {
                max-width: 100%;
                font-size: 12px;
            }
            
            .message{

                max-width: 80%;
                                
                div{
                    word-wrap: normal;
                    display: inline-block;
                    padding: 10px;
                }
            }

            .status{
                z-index: 100;
                font-size: 10px;
                padding-right: 5px;
            }
                       
            .user-state-change{
                color: $gray-light;
                padding: 10px 0px 10px 5px;
            
                vertical-align: middle;
                background-color: $gray-lighter;
                
                .timestamp{
                    color:  lighten($gray-light, 25);
                }
            }
            
            .progress-container{             
                width: 50%;
                
                span{
                    color: $gray-light;
                    font-size: 10pt;
                }
            }

            .file-container{
            
                display: inline-block;
                min-width: 300px;
                top: 20px;

                div{
                
                    padding: 3px;
                                        
                    .icon{
                        font-size: 30px;
                        text-align: center;
                    }

                
                }
                
            }

            .thumb-container{

                div{
                    display: inline-block;
                    padding: 10px;
                }
                
            }
                        
            .typing{

                width: 100%;
                                
                div{
                    display: inline-block;
                    padding: 10px;
                }
            }
            
            
        }
        
    
        .message-cell.mine{
                        
            .avatar{
                float: right;
            }

            .info{  

                padding-right: 45px;
                text-align: right;

            }
            

            .message{  
                float: right;
                text-align: right;
                
                div{
                    background-color: $brand-primary; 
                    color: #fff;  
                    text-align: left;          
                }
            }

            .infoicon{

                z-index: 100;
            }


            .status0{
                
                float: right;
                color: $brand-primary;
                
                .sending{
                    display: inline-block;
                }
                
                .sent{
                    display: none;
                }
            }
            
            .status1{
                
                float: right;
                color: $brand-success;
 
                .sending{
                    display: none;
                }
                
                .sent{
                    display: inline-block;
                }
                
            }

            .progress-container{
                float: right;
            }

            .file-container{
                float: right;

                div{
                    background-color: $brand-primary; 
                    color: #fff;  
                    text-align: left; 

                    a{
                        color: #fff;
                        text-decoration: underline;
                    }
                             
                }    
            }

            .thumb-container{
                float: right;

                div{
                    background-color: $brand-primary; 
                }

            }
                        
            a{
                color: #fff;
            }
            
        }

        .message-cell.mine.map{
            a{
                color: #000;
            }
        }
        
        .message-cell.other{
                        
            .avatar{
                float: left;
            }

            .infoicon{

            }

            .info{  

                padding-left: 45px;
                          
            } 
            
            .message{  
                float: left;
                          
                div{
                    background-color: $gray-lighter;             
                    color: $gray-dark;            
                }
            } 

            .status{
                display: none;
            }
            
            .file-container{
                div{
                    background-color: $gray-lighter; 
                    color: $gray-dark;  
                    text-align: left;          

                    
                    a{
                        color: $gray-dark; 
                        text-decoration: underline;
                    }

                }
                
            }

            .thumb-container{

                margin-left: 45px;

                div{
                    background-color: $gray-lighter; 
                }
            }
            
            .typing{

                padding-left: 45px;
                                
                div{
                    color: $gray-lighter;
                }
            }
            
        }
        
        .message-cell.not-first{
            
            .avatar{
                display: none;
            }
            
            .info{
                display : none;
            }
            
            .message{

            }
    
            .file-container{

            }
    
            .status{

            }
            
            .thumb-container{

            }
        }
        
        .message-cell.thumb{
    
            .status{

            }

        }
        
    }

}
